import React from 'react'
import { Icon } from 'antd'
import styles from './File.less'
import Ellipsis from '@/components/Ellipsis';
const File = ({ item, handlePreview, isUploading = true, handleRemove, width }) => {
  const imgType = ['png', 'jpeg', 'jpg', 'pdf'];
  const fileType = item.name.split('.').reverse()[0].toLowerCase()
  const isImg = imgType.includes(fileType);
  const length = Math.floor((width - 100) / 14)
  return (
    <span className={styles.uploadFile}>
      <div className="ant-upload-list ant-upload-list-text">
        <div className="ant-upload-list-item ant-upload-list-item-done">
          <div className="ant-upload-list-item-info">
            <span className={styles.name}>
              <Icon style={{ fontSize: 14 }} type={isImg ? 'file-image' : 'file'} />
              <a className={styles.name} style={{ marginLeft: 20 }} onClick={() => handlePreview(item)}>
                <Ellipsis tooltip length={length}>
                  {item.name}
                </Ellipsis>
              </a>
            </span>
          </div>
          {
            isUploading ? <Icon style={{ fontSize: 14 }} type="close" onClick={() => handleRemove(item)} /> : <a href={item.path}
              download={`${item.name}`}
              style={{ color: 'rgba(0, 0, 0, 0.65)', marginLeft: 10 }}>
              <Icon style={{ fontSize: 14 }} type="download" />
            </a>
          }
        </div>
      </div>
    </span>
  )
}

export default File
